import React from 'react';
import reqwest from 'reqwest';
import classnames from 'classnames';
import Layout from 'components/layout';
import css from './index.less';
import { Link } from 'react-router-dom'
import { Table, Button, Icon } from 'antd';
import { observer, inject, action } from 'mobx-react';
import Modal from './components/modal';

@inject('store')
@observer
class Home extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      modalType: 0 //0 隐藏modal,  1 显示添加商品modal，  2 显示删除商品modal
    };
    this.selectRow = {};
  }

  columns = [{
    title: 'ID',
    dataIndex: 'c_id',
    key: 'c_id'
  },{
    title: '名称',
    dataIndex: 'c_name',
    key: 'c_name'
  }, {
    title: '数量',
    dataIndex: 'c_amount',
    key: 'c_amount'
  }, {
    title: '优惠券类型',
    dataIndex: 'c_getTimeType',
    key: 'c_getTimeType',
    render: (text, record) => {
      if(record.c_getTimeType === 2) {
        return <span>优质</span>
      }
      return <span>普通</span>
    }
  }, {
    title: '优惠券链接',
    dataIndex: 'c_url',
    key: 'c_url'
  }, {
    title: '备注',
    dataIndex: 'c_remark',
    key: 'c_remark'
  },{
    title: '操作',
    dataIndex: 'edit',
    key: 'edit',
    render: (text, record) => (
      <div>
        <Button style={{marginRight: '15px'}} ghost type="primary" shape="circle" icon="edit" size="small" onClick={this.showModal.bind(this, record, 2)}/>
      </div>
    )
  }];

  showModal(coupon, type) {
    //type == 0 隐藏modal,  1 添加，  2 修改
    //const { store = {}, palaceList } = this.props;
    //console.log(coupon, type);
    this.selectRow = coupon;
    //console.log(store.getInGoods(palace.p_id));
    this.setState({
      modalType: type
    })
  }


  editCou( c_name, c_amount, c_getTimeType, c_url, c_remark) {
    //console.log( name, amount, getTimeType, url, remark);
    //console.log(this.selectRow);
    const { store = {} } = this.props;
    const { couponList = []} = store;
    couponList.forEach(item => {
      if(item.data.c_id == this.selectRow.c_id){
        //console.log('item', item);
        item.updateCou({
          c_id: item.data.c_id,
          c_name,
          c_amount,
          c_getTimeType,
          c_url,
          c_remark
        });
        this.setState({
          modalType: 0
        })
      }
    });
  }

  addCou( c_name, c_amount, c_getTimeType, c_url, c_remark) {
    const { store = {} } = this.props;
    store.addCoupon({
      c_name,
      c_amount,
      c_getTimeType,
      c_url,
      c_remark
    });
    this.setState({
      modalType: 0
    })
  }

  render() {
    const cls = classnames([css.layout]);
    const { modalType } = this.state;
    const { store = {} } = this.props;
    const { couponList = []} = store;
    const dataSource = [];
    //console.log('couponList', couponList);
    couponList.forEach((item, index) => {
      item.data.key = index;
      dataSource.push(item.data);
    });
    //console.log('palace ===', this.selectRow);
    const modalProps = {
      modalType,
      data: this.selectRow,
      editCou: this.editCou.bind(this),
      addCou: this.addCou.bind(this)
    };
    return (
      <Layout selected="3" title="优惠券列表">
        <div className={cls}>
          <div className={css.addBox}>
            <Button type="primary" icon="plus" onClick={this.showModal.bind(this, {data:{}}, 1)}>添加优惠券</Button>
          </div>
          <Table dataSource={dataSource} columns={this.columns} />
        </div>

        <Modal {...modalProps}/>
      </Layout>
    );
  }
}
export default Home;
